<script setup lang="tsx">
import { groupOrderDetailsApi, adminOrderDetailsApi } from '@/api/Order'
import { OrderStateDict, SubOrderStateDict, VerifyTypeDict } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})
let processedActiveImgList = ref<any>({})

const getDetail = async () => {
  const api = userStore.userInfo.roles.includes('商家')
    ? adminOrderDetailsApi
    : groupOrderDetailsApi
  const res = await api(props.id)
  detail.value = res.data
  processedActiveImgList.value = res.data.activeImg.includes(',')
    ? res.data.activeImg.split(',').map((url) => url.trim())
    : [res.data.activeImg]
}
onMounted(() => {
  getDetail()
})
</script>

<template>
  <div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">订单编号：{{ detail.orderNo }}</div>
      <div class="flex-[50%] px-5">订单状态：{{ OrderStateDict[detail.orderState] }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">下单人：{{ detail.orderNickName }}/{{ detail.orderMobile }}</div>
      <div class="flex-[50%] px-5">下单时间：{{ detail.orderTime }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>订单金额：</span>
        <span>{{ detail.orderPrice }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>优惠金额：</span>
        <span>{{ detail.discountAmt }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>红包金额：</span>
        <span>{{ detail.redPacketAmt }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>总补贴金额：</span>
        <span>{{ detail.totalSubsidyAmt }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>实付金额：</span>
        <span>{{ detail.payPrice }}</span>
      </div>
      <div v-if="!userStore.userInfo.roles.includes('商家')" class="flex flex-[50%] px-5">
        <span>所属商家：</span>
        <span>{{ detail.businessName }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>支付时间：</span>
        <span>{{ detail.payTime }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>拼团免单：</span>
        <span>{{ detail.free ? '是' : '否' }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">产品名称</div>
    <div class="flex flex-wrap text-14px py-2">
      <div :key="index" v-for="(item, index) in processedActiveImgList">
        <ElImage
          :src="item"
          fit="cover"
          class="w-15 mr-2"
          lazy
          :preview-src-list="processedActiveImgList"
          preview-teleported
        />
      </div>
      <!-- <ElImage
        :src="detail.activeImg"
        fit="cover"
        class="w-15"
        lazy
        :preview-src-list="[detail.activeImg]"
        preview-teleported
      /> -->
      <div class="ml-2">{{ detail.activeTitle }}</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">分销信息</div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">
        一级经纪人：{{ detail.agentNickName }}/{{ detail.agentMobile }}
      </div>
      <div class="flex-[50%] px-5">
        一级收益：
        <span v-show="detail.agent1CommissionAmt">￥{{ detail.agent1CommissionAmt }}</span>
        <span v-show="detail.agentPointsAmt">{{ detail.agentPointsAmt }}积分</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">
        二级经纪人：{{ detail.agent2NickName }}/{{ detail.agent2Mobile }}
      </div>
      <div class="flex-[50%] px-5">
        二级收益：
        <span v-show="detail.agent2CommissionAmt">￥{{ detail.agent2CommissionAmt }}</span>
        <span v-show="detail.subAgentPointsAmt">{{ detail.subAgentPointsAmt }}积分</span>
      </div>
    </div>
  </div>
  <div v-if="detail.orderEnrollInfos && detail.orderEnrollInfos.length">
    <div class="font-bold py-2">报名信息</div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">姓名：{{ detail.orderNickName }}</div>
      <div class="flex flex-[50%] px-5">手机号：{{ detail.orderMobile }}</div>
    </div>
    <div class="flex text-14px flex-wrap">
      <div :key="item.sort" v-for="item in detail.orderEnrollInfos" class="flex-[40%] px-5 py-2">
        {{ item.title }}：{{ item.value }}
      </div>
    </div>
  </div>
  <div v-if="detail.isPft">
    <div class="font-bold py-2">票付通</div>
    <div class="flex text-14px py-2">
      <div class="px-5">票付通订单号：</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">子订单信息</div>
    <div class="flex text-14px py-2">
      <el-table :data="detail.adminOrderItems" border style="width: 100%">
        <!-- <el-table-column prop="subOrderNo" label="子订单号" /> -->
        <el-table-column prop="subOrderNo" label="子订单号" width="120">
          <template #default="tableProps">
            <span>{{ tableProps.row.subOrderNo }}</span>
            <span
              v-if="tableProps.row.verifyType === 1"
              style="padding: 0 4px; margin-left: 6px; border: 1px solid #333; border-radius: 4px"
            >
              票付通
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsPrice" label="商品价格" />
        <el-table-column prop="subOrderState" label="子订单状态">
          <template #default="tableProps">
            {{ SubOrderStateDict[tableProps.row.subOrderState] }}
          </template>
        </el-table-column>
        <el-table-column prop="merchantName" label="核销商户" />
        <el-table-column prop="subOrderState" label="核销渠道">
          <template #default="tableProps">
            {{ VerifyTypeDict[tableProps.row.verifyType] }}
          </template>
        </el-table-column>
        <el-table-column prop="pftOrder" label="票付通订单号" />
        <el-table-column prop="merchantAmt" label="分账本金" />
        <el-table-column prop="totalSubsidyAmt" label="分账补贴" />
        <el-table-column prop="agent1CommissionAmt" label="一级经纪人佣金" />
        <el-table-column prop="agent2CommissionAmt" label="二级经纪人佣金" />
        <el-table-column prop="verifyTime" label="核销时间" />
      </el-table>
    </div>
    <div>
      <div class="w-100% text-right">合计分账本金：{{ detail.totalMerchantAmt }}</div>
      <div class="w-100% text-right">合计分账补贴：{{ detail.totalMerchantSubsidyAmt }}</div>
    </div>
  </div>
</template>
